<template>
	<div class="">
		<div class="bg-white">
			<Row>
				<Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
				<div class="d-flex justify-content-start ml-2">
					<div style="height: 60px;" class="d-flex flex-column justify-content-center">
						<div class="d-flex  justify-content-center align-items-end">
							<img style="" class="logo" src="../../src/assets/logo.jpg" />
							<span class="text-lg text-blod text-main">戍码OA系统</span>
						</div>
					</div>
				</div>
				</Col>
				<Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
				<div class="w-100 d-flex align-content-center justify-content-lg-end justify-content-between">
					<div class="d-lg-none">
						<div class="position-relative">
							<Icon class="bg-main rounded-circle" 
								@click="trigerMmflg"
								style="width: 50px; height: 50px; font-size: 40px; line-height: 50px; margin-top: 5px; margin-left: 5px;" type="ios-list" />
						</div>
						<div class="position-relative">
							<div :class="mmflg?'mmopen':'mmclose'" style="width: 200px;" class="position-absolute mmflg bg-yuebai">
								<Menu :active-name="current.permissions[0].code" theme="light" width="auto">
									
									<div v-for="(item, key) in current.permissions" :id="key" >
										<MenuItem
											v-if="item.type === 'P' && item.mflg === true"
											:name="item.code"
											:to="item.path"
											>
											<a>
												<!-- <Icon class="text-lg" type="md-laptop"></Icon> -->
											<span style="margin-left:8px;">{{item.name}}</span></a>
										</MenuItem>
										
										<Submenu v-if="item.type === 'M' && item.mflg === true" :name="item.code">
											<template slot="title">
												<!-- <Icon class="text-lg" :type="item.icon"></Icon> -->
												{{item.name}}
											</template>
											<MenuItem 
												v-for="(subItem, index) in item.permissions" 
												:name="subItem.code"
												:to="subItem.path"
												>
												<a><Icon class="text-lg" type="md-arrow-dropright"></Icon><span style="margin-left:8px;">{{subItem.name}}</span></a>
												
											</MenuItem>
										</Submenu>
									</div>
									
									
									
									
								</Menu>
							</div>
						</div>
					</div>
					<Menu mode="horizontal" active-name="1">
						<Submenu name="3">
							<template slot="title">
								<Icon class="bg-secondary text-light text-lg rounded-circle mr-2" type="ios-person" />
								<span>{{current.user.account}}</span>
							</template>
							<MenuItem  name="3-2">
								<a @click="logout" href="javascript:void(0)" class="w-100 h-100 text-main">退出登录</a>
							</MenuItem>
						</Submenu>
					</Menu>
				</div>
				</Col>
			</Row>
		</div>
		<Row>
			<Col class="d-none d-lg-block bg-yuebai py-2 pl-2" :xs="24" :sm="24" :md="24" :lg="5" :xl="4" :xxl="3">
				<Menu width="auto">
					<div v-for="(item, key) in current.permissions" :id="key" >
						<MenuItem
							v-if="item.type === 'P' && item.mflg === true"
							:name="item.code"
							:to="item.path"
							>
							<a>
								<!-- <Icon class="text-lg" type="md-laptop"></Icon> -->
							<span style="margin-left:8px;">{{item.name}}</span></a>
						</MenuItem>
						
						<Submenu v-if="item.type === 'M' && item.mflg === true" :name="item.code">
							<template slot="title">
								<!-- <Icon class="text-lg" :type="item.icon"></Icon> -->
								{{item.name}}
							</template>
							<MenuItem 
								v-for="(subItem, index) in item.permissions" 
								:name="subItem.code"
								:to="subItem.path"
								>
								<a><Icon class="text-lg" type="md-arrow-dropright"></Icon><span style="margin-left:8px;">{{subItem.name}}</span></a>
								
							</MenuItem>
						</Submenu>
					</div>
				</Menu>
			</Col>
			<Col class="p-2" :xs="24" :sm="24" :md="24" :lg="19" :xl="20" :xxl="21">
				<router-tab class="" />
			</Col>
		</Row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				mmflg: false,
			};
		},
		methods: {
			logout: function() {
				this.store.commit("loginOut");
			},
			trigerMmflg: function() {
				this.mmflg = !this.mmflg;
			},
		},
		computed: {
			current: function() {
				console.log(this.store.state.currentUser);
				return this.store.state.currentUser;
			}
		}
	}
</script>

<style scoped>
	.logo {
		height: 34px;
	}
	
	.mmflg {
		transition: all .5s ease-in-out;
	}
	
	.mmopen {
		left: 0px;
	}
	
	.mmclose {
		left: -300px;
	}
</style>
